<template>
    <div >
        <div >
            <el-table
                    :data="tableData"
                    ref="table"
                    highlight-current-row
                    v-loading="loading"
                    @row-click="rowSelectionChange"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="按钮ID"
                >
                </el-table-column>
                <el-table-column
                        prop="buttonName"
                        label="按钮名称">
                </el-table-column>
            </el-table>
        </div>
    </div>

</template>

<script>
    import {getAllButton,insertRoleButton,getRoleButton}from '@/api/buttonApi'
    // eslint-disable-next-line no-unused-vars
    export default {
        props: {
            params: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                form:{
                    roleId:'',
                    buttonList:[]
                },
                loading:false,
                selection:[],
                tableData: [],
            }
        },
        methods:{
            submit () {
                return new Promise((resolve, reject) => {
                    if(this.selection.length>0){
                        this.form.buttonList=this.selection.map(it=>it.id)
                    }
                    insertRoleButton(this.form).then(res => {
                        resolve(res.data)
                    }).catch(e => {
                        reject(e)
                        this.$message.error({
                            message: '抱歉，操作按钮遇到异常，请重试或联系管理员处理'
                        })
                    })
                })
            },
            getData(){
                this.loading=true
                getAllButton({id:'helloworld'}).then(res=>{
                    this.tableData=res.data.data
                    this.recordsCount=res.data.recordsCount
                    this.loading=false
                    //配置按钮
                    getRoleButton({roleId:this.params.roleId}).then(ress=>{
                        const tempData=ress.data.data
                        if(tempData!==undefined&&tempData.length>0){
                            this.tableData.forEach(it=>{
                                tempData.forEach(item=>{
                                    if(it.id==item.buttonId){
                                        this.$refs.table.toggleRowSelection(it,true)
                                    }
                                })
                            })
                        }

                    }).catch(e => {
                        this.$message.error({
                            message: '抱歉，读取角色信息信息遇到异常，请重试或联系管理员处理'
                        })
                    })
                }).catch(e => {
                    this.$message.error({
                        message: '抱歉，读取角色信息信息遇到异常，请重试或联系管理员处理'
                    })
                })

            },
            rowSelectionChange (row) {
                this.$refs.table.toggleRowSelection(row)
            },
            handleSelectionChange(rows){
                this.selection=rows
            },
        },
        created() {
            this.getData()
            this.form.roleId=this.params.roleId
        }
    }
</script>

<stype scoped>
</stype>
